<template>
  <div class="app-container">
    <el-container>
      <el-aside width="220px" style="background-color: white;padding: 2px;margin-bottom: 0;">
        <dept-project level="unit" show-del-btn="1" @selectBuilding="getCurrentBuilding" @selectUnit="getCurrentBuilding" />
      </el-aside>
      <el-main style="padding: 0 0 0 20px;">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="item in tabs"
            :key="item.name"
            :label="item.label"
            :name="item.name"
          />
        </el-tabs>
        <BuildingRoom
          v-if="activeTab === 'BuildingRoom'"
          :base-info="baseForm"
        />
        <FloorPlan
          v-else-if="activeTab === 'FloorPlan'"
          :building-data="baseForm"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import DeptProject from '../qualityManage/components/DeptProject'
import BuildingRoom from './houseManage/BuildingRoom'
import FloorPlan from './houseManage/FloorPlan'
export default {
  name: 'HouseManage',
  components: {
    DeptProject,
    BuildingRoom,
    FloorPlan
  },
  data() {
    return {
      tabs: [{
        label: '房屋列表',
        name: 'BuildingRoom'
      }, {
        label: '平面图',
        name: 'FloorPlan'
      }],
      activeTab: 'BuildingRoom',
      /* 当前选中楼栋数据 */
      baseForm: {}
    }
  },
  created() { // 初始化

  },

  methods: {
    handleTabClick(tab, event) {
      // console.log(tab, event);
    },
    getCurrentBuilding(data) {
      console.log(data)
      this.baseForm = data
    }
  }
}
</script>

<style scoped lang='scss'>
  .house-manage {
    display: flex;
    .house-aside {
      width: 260px;
    }
    .house-main {
      flex: 1;
      padding-left: 20px;
    }
  }
</style>
